<template>
  <div class='index-container' :class="[$route.meta.BottomNavShow ? '' : ' ']">
    <router-view :class="showCase ? '' : 'router-v'"></router-view>
    <tabNav v-if="$route.meta.BottomNavShow && showCase"></tabNav>
  </div>
</template>

<script>
import tabNav from '@/components/tab.vue'
export default {
  data() {
    return {
      showCase: true, // true 合规人员显示案件管理与员工画像，非合规人员不显示tab
    }
  },
  components: {
    tabNav
  },
  created() {
    let status = sessionStorage.getItem('hg_set_case_status')
    this.showCase = status == 1
  },
}
</script>

<style scoped lang="less">
.index-container {
  height: 100%;
  box-sizing: border-box;

  .index-inlet {
    padding-top: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 34px;
    color: #fff;
    font-weight: bold;

    >div {
      width: calc(50% - 7px);
      // width: 346px;
      height: 170px;
      padding: 25px 38px 0 28px;
      box-sizing: border-box;

      >:nth-child(1) {
        display: flex;
        align-items: center;

        i {
          width: 10px;
          height: 10px;
          background: #fff;
          margin-right: 12px;
          border-radius: 50%;
        }
      }

      >:nth-child(2) {
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 44px;

        p {
          width: 156px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          border-radius: 30px;


          span {
            font-size: 24px;
            margin-right: 12px;
          }

          img {
            width: 24px;
            height: 24px;
          }
        }
      }
    }

    >:nth-child(1) {
      background: url('../assets/css/images/inlet1.png') no-repeat;
      background-size: 100% 100%;

      div>p {
        background: linear-gradient(180deg, #FFDB9D 0%, #FFC436 100%);
        box-shadow: 0px 4px 8px 0px rgba(225, 94, 33, 0.7);
      }
    }

    >:nth-child(2) {
      background: url('../assets/css/images/inlet2.png') no-repeat;
      background-size: 100% 100%;

      div>p {
        background: linear-gradient(180deg, #93DEFF 0%, #3FAAEC 100%);
        box-shadow: 0px 4px 8px 0px rgba(63, 102, 181, 0.7);
      }
    }
  }

  .index-title-anli {
    margin: 28px 0 30px;
  }

  .index-title-xibao {
    margin: 40px 0 42px;
  }

  /deep/ .router-v {
    height: 100%;

    .page {
      height: 100%;

      .tabs-list {
        height: calc(100% - 180px);
      }
    }
  }
}



@media screen and (min-width:750px) {
  .xibao-item img {
    height: 220PX !important;
  }
}
</style>